<template>
	<view class="content">
		<TableHeader :count="count" :currt="currt" @pageChange="change"  ></TableHeader>
		<scroll-view scroll-y="true" class="scroll-Y" >
		    <view class="timetable-content" >
			   <div class="t-c-left">
			   	<timetable-order-list :list="orderList" ></timetable-order-list>
			   </div>
			   <div class="t-c-right">
			     <TiemtableContanier :currtTimetableLsit="pageContainer" ></TiemtableContanier>
			   </div>
		   </view>
			<div class="timetable-floor">
				<button  @click="relodTimetable" class="floor-button">刷新课程表</button>
			</div>
		</scroll-view>
	</view>
</template>

<script>
	import { getTimeTable } from "@/u_api/getTimetable.js"
	import TiemtableContanier from "@/components/timetable-container.vue"
	import TableHeader from "@/components/timetable-top-header.vue"
	import timetableOrderList from "@/components/timetable-order-list.vue"
    import mes from "./testData.js"
	import { clearUser,clearTimetable }from "@/utils/storage.js"
	import {computeClassLength,
		createTable,
		orderList,
		setDay,
		getOffset
	}from '@/pages/timetable/timetableBaseConfig.js';
	export default {
		components:{
			timetableOrderList,
			TableHeader,
			TiemtableContanier
		},
		data() {
			return {
				msg:[],
				orderList,
				currt : 1, 
				count : 0,
				pagCount : 7,
				pageContainer: [],
				start:{}
		   }
		}
		,
		beforeCreate(){
			 uni.intercept();
		},
		async onLoad(){
			
			let tab = uni.getStorageSync("timetable");
			  
				  if(!tab){
					 await this.initTimebable()	
						}else{
							
							this.msg = tab
						} 
						
			this.msg.length && this.initConfig()
		},
		computed:{
			isload(){
				return this.msg.length  < 1 
			}
		}
		,
		methods: {
		  change(n){
			  this.currt = n;
			  this.changePagecontainer(n > 0 ? this.currt : 1);
		
		  },
		  setCount(n){
			  this.count = n
		  },
		  initConfig(){
			  const nowDate = new Date();
			  const storeStart = uni.getStorageSync('start');
			  const startDate = new Date(storeStart.year,storeStart.month - 1,storeStart.day );
			  const day = Math.floor((nowDate - startDate ) / 86400000) + 1  ; 
		
			  this.setCount(Math.ceil(this.msg.length / this.pagCount))
			
			  this.currt = Math.ceil(day / this.pagCount);
			 
			  this.changePagecontainer(this.currt)
		  },
		  
		  changePagecontainer(index){
			  const len = index * this.pagCount,length = this.msg.length;
			  while(this.pageContainer.length){
				   this.pageContainer.shift();
			  }
			
			  for(let i = (index - 1) * this.pagCount;i < len && i < length ;i ++){
				  this.pageContainer.push(this.msg[i]);
		
			  }
			  
		  },
		  pushArr(obj,start){
		  	let item = null;
		  	while( item = obj[start]){
                    item.forEach((i)=>{
						
						i.classList.forEach(it=>{
							it['height'] = computeClassLength((it.start).replace(/-/g, '/'),(it.end).replace(/-/g, '/'));
							it["offset"] = getOffset((it.start).replace(/-/g, '/'));
							 
						})
		  			  this.msg.push(i);
		  			})
				start++;
		    }
			
		  },
		   // 重载课表
		  async relodTimetable(){
			  uni.intercept();
			  while(this.msg.length){ //清空数组
				  this.msg.pop();
			  }
		     uni.setStorageSync('timetable',"");
			 await this.initTimebable();
			 this.msg.length && this.initConfig()
			 
		  },
		 async getTimetables(){		 			 
	
			 const jwt = uni.getStorageSync('jwt')
		     const t = await getTimeTable(jwt)
			 return t;
		   },
		   // 初始化课程表
		 async initTimebable(){
		 const result = await this.getTimetables();// result.msg
		    
			  
			  const timetable = createTable(result.msg); 
			  const start = timetable.schoolOpen;
			  const end = timetable.schoolClose;
			
			  const startDate = new Date(start.year,start.month -1,start.day).getDay();
			  const endDate = new Date(end.year,end.month -1,end.day).getDay()
			  for(let i = 1; i < startDate; i++){
			  	timetable[start.year][start.month].unshift({
			  		year:start.year,
			  		month:start.month,
			  		day : start.day - i,
					week:setDay(start.year,start.month,start.day - i),
			  		classList:[]
			  	})
			  }
			  let endDay = +end.day,endMonth = +end.month,endYear = +end.year;
			  const maxDay = new Date(end.year,end.month,0)
			  let l = 7 - endDate;
			  for(let i = 0;i < l;i++){
			  	if(endDay + i > maxDay) {
			  		endDay = 0;
			  		l -= i;
			  		i = 1;
			  		if(endMonth + 1 > 12) {
			  			endYear += 1
			  			endMonth = (endMonth + 1) % 13,
			  			timetable[endYear] = {};
			  			timetable[endYear][endMonth] = []
			  		}  
			  		
			  		
			  	}
			  	timetable[endYear][endMonth].push({
			  		year:endYear,
			  		month:endMonth,
			  		day : endDay + i + 1,
					week:setDay(endYear,endMonth,endDay + i),
			  		classList:[]
			  	})
			  }
		  let years = Object.keys(timetable).sort((a,b)=>a - b);
		   let s = +start.month;
		  if(years.length  === 4) {
			  
			  const t  =  [years[0],years[1]]
			  this.pushArr(timetable[t[0]],s)
			  this.pushArr(timetable[t[1]],1)
		  }else{
			   this.pushArr(timetable[years[0]],s)
		  } 
			 uni.setStorageSync('timetable',this.msg)
		     uni.setStorageSync('start',this.msg[0]);
		  }
		}
	}
</script>

<style scoped >
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		width: 100%;
		position: relative;
		
		box-sizing: border-box;
	}
.timetable-content{
	width: 100%;
	display: flex;
	height: inherit;
	position: relative;
	background-color: white;
	border-bottom: 1px solid #dcdfe6 ;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	
}
.t-c-left{
	flex-shrink: 1;
	width: 10%;
	
	
}
.t-c-right{
	flex: 1;
	

}
.timetable-floor{
	height:100px;
	width: 100%;
	padding-top: 20rpx;
}
.floor-button{
  width: 40%;
  color: white;
  background-color: #41a863;
  border-radius: 20rpx;
}
.t{
	position: fixed;
	top: 90px;
	width: 200px;
}
</style>
